<template>
  <div id="books" :catchtouchmove="captcha">
    <scroll-view :style="{'height': height+'px'}" :scroll-y="true" @scrolltolower="fnTask">
      <div class="header">
        <div class="city" @click="goCitySelect">{{query.id}}</div>
        <div class="icon">
          <van-icon name="arrow-down" size="14px" />
        </div>
        <div class="search">
          <van-search
            v-model="searchInput"
            shape="round"
            placeholder="搜索品牌/门店/任务名称"
            @click="onSearch"
            disabled
          />
        </div>
        <div class="icon" @click="goMsg">
          <img mode style="width:20px;height:19px" src="/static/imgs/message.jpg" alt />
        </div>
      </div>
      <div class="swiper_wrap">
        <swiper
          indicator-dots
          circular
          :autoplay="autoplay"
          indicator-color="gray"
          indicator-active-color="#fff"
        >
          <swiper-item v-for="(item, index) in adList" :key="index">
            <!-- Type Int 类别 1-文字  2-图片  3-视频 -->
            <div class="bannerText" v-if="item.type===1" @click.stop="fnJump(item)">{{item.ad_desc}}</div>
            <img
              v-if="item.type===2 && item.file_path"
              :src="item.file_path"
              alt
              @click.stop="fnJump(item)"
            />
            <template v-if="item.type===3">
              <!-- 视频 -->
              <img v-if="autoplay&&!playVideo" :src="item.cover_path" @click.stop="fnJump(item)" />
              <video autoplay @ended="autoplay=true;playVideo=false" v-else :src="item.file_path"></video>
            </template>
          </swiper-item>
        </swiper>
      </div>
      <template v-if="taskNum>0">
        <div style="background: #F9F9F9;height: 65px;" v-if="taskNum>0"></div>
        <div class="tip_wrap">
          <div class="tip">
            <div class="left">待提交</div>
            <div class="right">
              <div @click="taskNumClickList">您有{{taskNum}}个任务待提交</div>
              <div class="icon">
                <img src="/static/imgs/video.png" alt />
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="brand">
        <div class="brand_title">品牌推荐</div>
        <ul>
          <li v-for="(item,index) in tenantList" :key="index">
            <div
              class="tab_img"
              @click="selectBrand(item,index)"
              :class="index == needindex? 'active':''"
              :style="'background-image:url('+item.tenant_logo+')'"
            ></div>
            <div class="tab_title">{{item.tenant_name}}</div>
          </li>
        </ul>
      </div>
      <div style="background: #F9F9F9;height: 20px;"></div>
      <div class="data_list">
        <div class="data_inner">
          <div class="kuai">
            <div :class="objParam.orderType == 2? 'chou active': 'chou'" @click.stop="Quick(2)">酬劳最高</div>
            <div :class="objParam.orderType == 1? 'juli active': 'juli'" @click.stop="Quick(1)">离我最近</div>
          </div>
          <van-tabs
            line-width="18"
            :swipeable="true"
            :active="active"
            animated
            color="#226DF0"
            @change="onChange($event)"
          >
            <van-tab
              class="tab_inner"
              v-for="(item, index) in list"
              :key="index"
              :title="item.columnTab"
            >
              <div v-if="taskList.length===0" class="nodata">
                <NoData />
              </div>
              <template v-if="objParam.orderType===1">
                <!-- 距离 -->
                <div class="task" v-for="(item,indexs) in taskList" :key="indexs">
                  <div class="task-list">
                    <div class="task-list-flex">
                      <img :src="item.restaurant_logo" alt />
                      <div class="task-list-flex-r">
                        <h6>
                          {{item.restaurant_name}}
                          <span style="color:'#666666'">
                            {{item.distance}}
                            <!-- <formatText :valueData="item.distance" :textType="'distance'" /> -->
                          </span>
                        </h6>
                        <div class="task-list-flex-r-address">
                          <van-icon name="location-o" />
                          {{item.address}}
                        </div>
                      </div>
                    </div>
                    <template v-if="true">
                      <div
                        class="task-list-children"
                        @click.stop="fnTaskDetail(children.task_id,children.status)"
                        v-for="(children,sindex) in item.items"
                        :key="sindex"
                      >
                        <div class="task-list-children-l">
                          <h6>
                            {{children.task_name}}
                            <span>{{taskmoldStatus[children.task_mold]}}</span>
                          </h6>
                          <p class="task-list-children-l-money">
                            <img src="/static/imgs/jiang.png" alt />
                            <span>¥</span>
                            {{children.reward}}
                          </p>
                          <p class="task-list-children-l-time">
                            任务截止:
                            <span style="color:#999999">{{children.task_end_time}}</span>
                          </p>
                        </div>
                        <div class="task-list-children-r">
                          <template v-if="children.status===1">
                            <p
                              class="task-list-children-r-come"
                              @click.stop="receiverTask(children.status,children)"
                              v-if="children.surplus!=0"
                            >领取</p>
                            <p v-else-if="children.surplus==0" class="task-list-children-r-end">已领完</p>
                          </template>
                          <div class="shengTime" v-if="children.status===2 && children.countDow">
                            剩余时间
                            <br />
                            <van-count-down
                              format="DD天HH:mm:ss"
                              @finish="(children.countDow = 0,children.status = 1)"
                              :time="children.countDow"
                            />
                          </div>
                          <template v-if="children.status===2 && !children.countDow">
                            <p
                              class="task-list-children-r-come"
                              @click.stop="receiverTask(children.status,children)"
                            >领取</p>
                          </template>
                          <p
                            v-if="children.status===1"
                            class="task-list-children-r-num"
                          >余量：{{children.surplus}}</p>
                          <p v-if="children.status===0" class="task-list-children-r-end">已结束</p>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="task" v-for="(item,indexs) in taskList" :key="indexs">
                  <div style="padding-top: 50rpx;" class="task-list">
                    <div class="task-list-flex" style="padding-bottom:6px">
                      <img :src="item.restaurant_logo" alt />
                      <div class="task-list-flex-r">
                        <p style="margin-top: -3px;" class="task-list-children-l-money">
                          <img src="/static/imgs/jiang.png" alt />
                          <span>¥</span>
                          {{item.reward}}
                        </p>
                        <h6>{{item.task_name}}</h6>
                        <p class="task-list-children-l-time">
                          任务截止:
                          <span style="color: #999;">{{item.task_end_time}}</span>
                        </p>
                      </div>
                      <div class="task-list-children-r">
                        <template v-if="item.status===1">
                          <p
                            v-if="item.status===1&&item.surplus==0"
                            class="task-list-children-r-end"
                          >已领完</p>
                        </template>
                        <p
                          v-if="item.status===1&&item.surplus>0"
                          class="task-list-children-r-num task-list-children-too"
                        >余量：{{item.surplus}}</p>
                        <p v-if="item.status===0" class="task-list-children-r-end">已结束</p>
                      </div>
                    </div>
                    <div
                      class="task-list-children"
                      v-for="(children,sindex) in item.items"
                      :key="sindex"
                      style="margin-top: 12px;"
                      @click.stop="fnTaskDetail(children.id,item.status)"
                    >
                      <h6 style="font-weight: 500;">
                        {{children.restaurant_name}}
                        <span>
                          {{children.distance}}
                          <!-- <formatText :valueData="children.distance" :textType="'distance'" /> -->
                        </span>
                      </h6>
                      <div style="margin-top: 8px;" class="task-list-flex-r-address children-view">
                        <div>
                          <van-icon name="location-o" />
                          {{children.address}}
                        </div>
                        <span style="color: #F05C48;" class="childrenText">余量：{{children.surplus}}</span>
                        <!-- </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <div style="background: #F9F9F9;height: 100px;"></div>
    </scroll-view>
    <van-dialog id="van-dialog" />
    <!--滑块组件-->
    <ne-captcha
      id="captcha"
      captcha-id="a242c51a9ca04c6b8e578071f190199c"
      width="300px"
      @verify="handlerVerify"
      @close="handlerClose"
    />
    <van-toast id="van-toast" />
    <van-popup :show="pShow">
      <notLoginModel @noLogin="pShow = false"></notLoginModel>
    </van-popup>
  </div>
</template>
<script>
import { get } from "../../utils/request";
import Dialog from "../../../static/vant/dialog/dialog";
import { setStorage, getStorage } from "../../utils/storage";
import formatText from "../../common/components/formatText";
import NoData from "@/common/components/noData";
import Toast from "../../../static/vant/toast/toast";
import util from "../../utils/tools";
import notLoginModel from "@/common/components/notLoginModel";
export default {
  components: { formatText, NoData, notLoginModel },
  data() {
    return {
      height: "", //页面高度
      taskPages: 1,
      autoplay: true, //轮播图自动播放
      isShow: true, // 判断滑块显示隐藏功能
      active: 0,
      needindex: null,
      isShowCity: false,
      searchInput: "",
      playVideo: false,
      // banner
      adList: [],
      // 待提交任务数量
      taskNum: "",
      // 品牌
      tenantList: [],
      // 任务
      taskList: [],
      query: {
        id: "北京市"
      },
      // 接口参数对象
      objParam: {
        tenant_id: "", // 品牌
        restaurant: "", // 门店
        country: "10000", // 国家ID
        province: "", // 省份ID
        city: "110100", // 城市ID
        address: "", // 地址
        orderType: 1, // 排序：1按距离2按金额 默认：1按距离
        task_category: 0, // 0全部  1即将开始  2进行中  3过期任务
        current: 0, // 当前页面
        size: 3 // 每页返回条数
      },
      // 0全部  1即将开始  2进行中  3过期任务
      list: [
        {
          columnTab: "全部",
          task_category: 0
        },
        {
          columnTab: "即将开始",
          task_category: 1
        },
        {
          columnTab: "进行中",
          task_category: 2
        },
        {
          columnTab: "过期任务",
          task_category: 3
        }
      ],
      taskmoldStatus: {
        1: "高峰期",
        2: "低峰期",
        3: "随时",
        4: "夜宵",
        5: "包夜"
      },
      loading: false, // 是否有更多数据
      status: "", // 接受领取任务参数
      obj: "", // 接受领取任务对象
      captcha: false, // captcha验证是否打开
      isLogin: false, // 是否登录
      pShow: false
    };
  },
  onLoad() {
    this.isLogin = wx.getStorageSync("userInfo").token && true;
    // 获取屏幕的高度

    this.fnInitParam();
    wx.getSystemInfo({
      success: res => {
        this.height = res.windowHeight;
      }
    });
    this.objParam.province = wx.getStorageSync("cityObj").parentAdcode || ""; // 省份ID
    this.objParam.city = wx.getStorageSync("cityObj").id || "110100"; // 城市ID
    this.query.id = wx.getStorageSync("cityObj").name || "北京";
    this.fetchAllDatas();
  },
  onShow() {
    this.isLogin = wx.getStorageSync("userInfo").token && true;
    if (
      typeof this.$root.$mp.page.getTabBar === "function" &&
      this.$root.$mp.page.getTabBar()
    ) {
      this.$root.$mp.page.getTabBar().setData({
        activeIndex: 0 //对应页面的index
      });
    }
    this.autoplay = true;
    this.playVideo = false;
  },
  /**
   * 这里需求指出要点击首页按钮 获取全部的数据，所以性能问题就暂时先不考虑了
   */
  onTabItemTap(item) {
    this.fnInitParam();
    this.fetchAllDatas();
  },
  onPullDownRefresh() {
    wx.showNavigationBarLoading();
    this.fnInitParam();
    this.autoplay = true;
    this.playVideo = false;
    this.fetchAllDatas();
  },
  onShareAppMessage() {
    return {
      title: "第九神秘顾客",
      path: "/pages/books/main" // 分享的页面路径，一般设置首页
    };
  },
  methods: {
    /**
     * 加载请求
     */
    fetchAllDatas() {
      if (wx.getStorageSync("cityObj").name) {
        this.fnTask();
      }
      //如果拿不到位置信息则获取
      if (!wx.getStorageSync("lnglat")) {
        this.fnGetGps();
      } else {
        this.fnAdList();
        this.fnTenant();
        this.fnTask();
        this.fnMyTaskNum();
      }
      // this.active = this.list[0].task_category;
      wx.stopPullDownRefresh();
      wx.hideNavigationBarLoading();
    },
    taskNumClickList() {
      //点击任务待提交
      wx.switchTab({
        url: "/pages/search/main"
      });
    },
    // 领取任务
    receiverTask(status, obj, index, subindex) {
      if (this.isLogin) {
        let _isAuth = wx.getStorageSync("userInfo").auth_status;
        if (_isAuth) {
          this.status = status;
          this.obj = obj;
          this.$root.$mp.page.selectComponent("#captcha").popup();
          this.captcha = true;
        } else {
          Dialog.confirm({
            confirmButtonText: "去实名",
            cancelButtonText: "取消",
            message: "您还未做实名认证，请先完成实名认证"
          })
            .then(res => {
              wx.navigateTo({
                url: "/pages/realName/main"
              });
            })
            .catch(() => { });
        }
      } else {
        this.pShow = true;
      }
    },
    handlerClose() {
      this.$root.$mp.page.selectComponent("#captcha").reset();
      this.captcha = false;
    },
    // 验证码验证结果回调
    handlerVerify: function (ev) {
      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
      if (!ev.mp.detail[0]) {
        // 验证成功 调用领取任务接口 或者阿里认证页面
        let _isAuth = wx.getStorageSync("userInfo").auth_status;
        if (_isAuth) {
          if (this.status == 1) {
            this.$http
              .post({
                url: "/mobile/api/receivetask",
                data: {
                  customer_id: wx.getStorageSync("userInfo").customer_id,
                  id: this.obj.task_id,
                  lnglat: wx.getStorageSync("lnglat")
                }
              })
              .then(res => {
                if (res.code == "RX0000") {
                  Dialog.alert({
                    confirmButtonText: "确认",
                    message: res.data.msg
                  }).then(() => {
                    this.successfnInitParam(); //初始化
                    this.fnTask();
                    this.isShow = false;
                  });
                } else {
                  wx.showToast({
                    icon: "none",
                    title: res.msg
                  });
                  this.isShow = false;
                }
              });
          } else {
            Dialog.alert({
              message: "该任务已被领完，下次早点来哦！☹"
            }).then(() => {
              this.isShow = false;
            });
          }
        } else {
          Dialog.confirm({
            confirmButtonText: "去实名",
            cancelButtonText: "取消",
            message: "您还未做实名认证，请先完成实名认证"
          })
            .then(res => {
              wx.navigateTo({
                url: "/pages/realName/main"
              });
            })
            .catch(() => { });
          this.isShow = false;
        }
      } else {
        // 验证失败
        // 请不要在验证失败中调用reset，验证码内部会进行相应处理
      }
    },
    goIndexTaskDetail(option) {
      wx.navigateTo({
        url: "/pages/indexTaskDetail/main?"
      });
    },
    // 品牌切换
    selectBrand(item, index) {
      this.successfnInitParam();
      this.needindex = index;
      let _index = this.objParam.task_category;
      this.objParam.tenant_id = item.tenant_id;
      this.fnTask();
    },
    // 酬金和距离切换
    Quick(type) {
      this.taskPages = 1;
      this.objParam.orderType = type;
      // 排序：1按距离2按金额 默认：1按距离
      this.objParam.current = 0; // 当前页面
      this.fnTask();
    },
    // 消息列表
    goMsg() {
      if (this.isLogin) {
        wx.navigateTo({
          url: "/pages/scan/main"
        });
      } else {
        this.pShow = true;
      }

    },
    // 城市选择
    goCitySelect() {
      wx.navigateTo({
        url: "/pages/citySelect/main"
      });
    },
    // 页签切换及状态过滤
    onChange(event) {
      this.taskList = [];
      this.taskPages = 1;
      this.objParam.current = 0;
      let _index = event.mp.detail.index;
      this.objParam.task_category = this.list[_index].task_category;
      this.active = this.list[_index].task_category;
      this.fnTask();
    },
    showPopup() {
      this.isShowCity = true;
    },
    onSearch() {
      wx.navigateTo({
        url: `/pages/searchTask/main?searchInput=${this.searchInput}`
      });
    },
    distanceFun(val) { // 距离
      if (val) {
        if (val / 1000 < 1) { // 小于1000米
          return val.toFixed(0) + 'm'
        }
        return (val / 1000).toFixed(2) + 'km';
      } else {
        return '0m'
      }

    },
    // BANNER
    fnAdList() {
      this.$http
        .post({
          url: "/mobile/api/adlist",
          data: { pos: 1 }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.adList = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // banner 跳转处理
    /**
     * @param {Number} action 是否可以跳转 1是0否
     * @param {String} file_path 素材路径
     * @param {String} jump_url 跳转参数链接或其他客户端参数
     * @param {Number} type 1-文字  2-图片  3-视频
     */
    fnJump(item) {
      this.autoplay = true;
      this.playVideo = false;
      if (item.action === 1 && item.jump_url) {
        wx.navigateTo({
          url: "/pages/webview/main?url=" + item.jump_url
        });
      } else {
        if (item.type === 3) {
          //如果是视频类别的 轮播图自动播放暂停开始自动播放视频
          this.autoplay = false;
          this.playVideo = true;
        } else {
          //文本内容
          wx.navigateTo({
            url: "/pages/webview/main?id=" + item.id
          });
        }
      }
    },
    // 品牌列表
    fnTenant() {
      this.$http
        .post({
          url: "/mobile/api/brand/list"
          // data: { pos: 1 }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.tenantList = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // 任务 调用这个方法必须记得初始化状态 this.fnInitParam()
    fnTask() {
      if (this.objParam.current >= this.taskPages) {
        return;
      }
      this.objParam.current += 1;
      this.$http
        .post({
          url: "/mobile/api/tasklist",
          data: this.objParam
        })
        .then(res => {
          let that = this;
          if (res.code == "RX0000") {
            const data = res.data.records.map(record => {
              return {
                task_id: record.task_id ? record.task_id : "",
                restaurant_logo: record.restaurant_logo,
                restaurant_name: record.restaurant_name,
                address: record.address,
                distance: this.distanceFun(record.distance),
                reward: record.reward,
                task_end_time:
                  record.task_end_time &&
                  record.task_end_time.replace(" 00:00:00", ""),
                task_name: record.task_name,
                surplus: record.surplus,
                task_mold: record.task_mold,
                status: record.status,
                isopen: false,
                items: record.items.map(item => ({
                  id: item.id ? item.id : "",
                  task_name: item.task_name,
                  reward: item.reward,
                  task_end_time: item.task_end_time.replace(" 00:00:00", ""),
                  surplus: item.surplus,
                  task_mold: item.task_mold,
                  status: item.status,
                  task_id: item.task_id,
                  countDow:
                    item.release_time &&
                    that.fnCountDown(item.release_time.replace(/-/g, "/")),
                  address: item.address,
                  restaurant_name: item.restaurant_name,
                  distance: this.distanceFun(item.distance)
                }))
              };
            });
            if (this.objParam.current === 1) {
              //如果是第一页赋值
              this.taskList = data;
            } else {
              this.taskList.push(...data);
            }
            this.taskPages = res.data.pages;
          } else {
            wx.showToast({
              icon: "none",
              title: res.data
            });
          }
        });
    },
    // 待提交任务数量 /mobile/api/mybankcard
    fnMyTaskNum(status) {
      if (this.isLogin) {
        // 是否登录
        let _obj = {
          customer_id: wx.getStorageSync("userInfo").customer_id,
          current: 1,
          size: 10,
          status: 1,
          lnglat: wx.getStorageSync("lnglat")
        };
        this.$http
          .post({
            url: "/mobile/api/mytasklist",
            data: _obj
          })
          .then(res => {
            if (res.code == "RX0000") {
              this.taskNum = res.data.total;
            } else {
              wx.showToast({
                title: res.data
              });
            }
          });
      }
    },
    // 初始化参数
    fnInitParam() {
      this.taskPages = 1;
      this.active = this.list[0].task_category;
      this.objParam.task_category = 0;
      this.needindex = null;
      this.objParam.tenant_id = "";
      this.objParam.restaurant = "";
      this.objParam.address = "";
      this.objParam.orderType = 1;
      this.objParam.current = 0;
    },
    // 领取之后的回调初始化
    successfnInitParam() {
      this.taskPages = 1;
      this.objParam.task_category = 0;
      // this.objParam.tenant_id = "";
      this.objParam.restaurant = "";
      this.objParam.address = "";
      this.objParam.orderType = 1;
      this.objParam.current = 0;
    },
    // 格式化时间戳
    fnCountDown(t) {
      let _sTime = new Date().getTime(); //现在时间（时间戳）
      let _eTime = new Date(t).getTime();
      return _eTime - _sTime > 0 ? _eTime - _sTime : "00:00:00";
    },
    // 任务详情
    fnTaskDetail(id, status) {
      if (this.isLogin) {
        let _isAuth = wx.getStorageSync("userInfo").auth_status;
        wx.setStorageSync("taskId", id); // 任务id 跳转详情传id
        if (_isAuth) {
          wx.navigateTo({
            url: `/pages/myTaskDetail/main?status=${status}`
          });
        } else {
          Dialog.confirm({
            confirmButtonText: "去实名",
            cancelButtonText: "取消",
            message: "您还未做实名认证，请先完成实名认证"
          })
            .then(res => {
              wx.navigateTo({
                url: "/pages/realName/main"
              });
            })
            .catch(() => { });
        }
      } else {
        this.pShow = true;
      }
    },
    // 获取地理位置方法
    async fnGetGps() {
      let that = this;
      await wx.getLocation({
        type: "gcj02", //返回可以用于wx.openLocation的经纬度
        success: function (res) {
          var longitude = res.longitude; //经度
          var latitude = res.latitude; //维度
          wx.setStorageSync("lnglat", longitude + "," + latitude);
          that.objParam.lnglat = longitude + "," + latitude; // 经纬度
          that.fnAdList();
          that.fnTenant();
          that.fnTask();
          that.fnMyTaskNum();
        },
        fail(err) {
          wx.showToast({
            title: "请先授权小程序获取用户位置"
          });
          wx.setStorageSync("lnglat", "116.3683244,39.915085");
          that.fnAdList();
          that.fnTenant();
          that.fnTask();
          that.fnMyTaskNum();
        }
      });
    }
  }
};
</script>
<style lang="less">
.children-view {
  display: flex !important;
  justify-content: space-between !important;
  .childrenText {
    color: #db4a37;
  }
}
.task-list-children-too {
  width: 126rpx;
}

#books {
  position: absolute;
  width: 375px;
  background: #f9f9f9;
  .header {
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .city {
      font-size: 14px;
      height: 54px;
      line-height: 54px;
      display: block;
      text-align: center;
      margin-right: 4px;
    }
    .icon {
      height: 54px;
      display: flex;
      align-items: center;
    }
    .search {
      flex: 1;
      margin-left: 17px;
      .van-search__content {
        padding-left: 38px;
      }
    }
  }
  .swiper_wrap {
    width: 100%;
    & > swiper {
      width: 100%;
      height: 139px;
      .bannerText {
        background: #ffffff;
        color: #226df0;
        font-size: 16px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tip_wrap {
    width: 100%;
    position: relative;
    .tip {
      background: url("../../../static/imgs/tipbg.png") no-repeat center;
      background-size: 100%;
      border-radius: 10px;
      position: absolute;
      bottom: 10px;
      left: 12px;
      width: 355px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 5px;
      .left {
        float: left;
        width: 40%;
        text-align: left;
        height: 53px;
        line-height: 53px;
        color: #333;
        font-weight: bolder;
        box-sizing: border-box;
        padding-left: 15px;
        font-size: 16px;
        font-weight: 500;
      }
      .right {
        float: right;
        text-align: left;
        color: #0040c1;
        height: 53px;
        line-height: 53px;
        font-size: 14px;
        .icon {
          margin: 2px 36px 0 9px;
          > img {
            width: 12px;
            height: 12px;
          }
        }
        & > div {
          float: left;
        }
      }
    }
  }
  .brand {
    width: 100%;
    padding-bottom: 17px;
    background: #fff;
    overflow: hidden;
    .brand_title {
      font-weight: 500;
      font-size: 16px;
      text-align: center;
      margin: 13px 0 0;
    }
    & > ul {
      display: flex;
      overflow-x: scroll;
      padding: 15px 4px 0;
      &::-webkit-scrollbar {
        display: none;
      }
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
      & > li {
        box-sizing: border-box;
        padding: 0 8px;
        width: 164rpx;
        list-style: none;
        .tab_img {
          width: 65px;
          height: 60px;
          vertical-align: middle;
          border-radius: 4px;
          box-sizing: border-box;
          transition: 0.3s;
          border: 1px solid #f0f0f0;
          box-shadow: 2px 2px 4px 4px rgba(240, 240, 240, 0.24),
            -2px -2px 4px 4px rgba(240, 240, 240, 0.24);
          background-size: cover;
          background-position: center;
          &.active {
            border: 1px solid red;
          }
        }
        .tab_title {
          width: 100%;
          text-align: center;
          color: #666666;
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .data_list {
    background: #f9f9f9;
    box-sizing: border-box;
    min-height: 100px;
    .data_inner {
      background: #fff;
      position: relative;
      .van-tab {
        color: #666;
        font-size: 14px;
      }
      .van-tab.van-tab--active {
        color: #226df0;
        font-weight: 600;
        font-size: 16px;
      }
      .tab_inner {
        margin-top: 50px;
        overflow: hidden;
        background: #f9f9f9;
        .tab_data {
          width: 100%;
          box-sizing: border-box;
          padding-top: 10px;
          .data_inner_item {
            min-height: 90px;
            border-bottom: 10px solid #f9f9f9;
            padding-top: 10px;
            background: #ffffff;
            .tab_one {
              width: 100%;
              clear: both;
              .tab_left {
                width: 69px;
                float: left;
                & > img {
                  display: inline-block;
                  margin: 0 auto;
                  width: 49px;
                  height: 47px;
                  vertical-align: middle;
                  box-shadow: #e6eeec 0px 0px 10px;
                }
              }
              .tab_right {
                float: left;
                height: 64px;
                border-bottom: 1px solid #d8d8d8;
                width: 78%;
                .tab_title {
                  height: 30px;
                  font-size: 14px;
                  & > .gray {
                    text-align: center;
                    font-size: 8px;
                    display: inline-block;
                    width: 29px;
                    height: 12px;
                    margin-left: 5px;
                    color: #666;
                    background: #f3f3f3;
                  }
                }
                .address {
                  height: 30px;
                  color: #999;
                  font-size: 12px;
                  width: 80%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
            .tab_two {
              width: 100%;
              .tab_left1 {
                width: 69px;
                float: left;
                & > div {
                  margin: 0 auto;
                  width: 49px;
                  height: 80px;
                }
              }
              .tab_right_two {
                width: 78%;
                float: left;
                .right_two_title {
                  width: 100%;
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .sum_btn {
                    display: inline-block;
                    width: 54px;
                    height: 18px;
                    line-height: 18px;
                    color: #4c46df;
                    font-size: 10px;
                    margin-right: 10%;
                    border-radius: 9px;
                    text-align: center;
                  }
                }
                .money {
                  width: 100%;
                  overflow: hidden;
                  .font_logo {
                    float: left;
                    width: 23px;
                    height: 23px;
                    line-height: 23px;
                    text-align: center;
                    border-radius: 8px 8px 8px 0px;
                    background: #db4a37;
                    font-size: 12px;
                    color: #fff;
                  }
                  .money_num {
                    float: left;
                    width: 55%;
                    height: 25px;
                    line-height: 25px;
                    color: #db4a37;
                    box-sizing: border-box;
                    padding-left: 10px;
                  }
                  .sheng_time {
                    float: left;
                    width: 80px;
                    font-size: 12px;
                    color: #db4a37;
                    text-align: right;
                    .receive {
                      display: inline-block;
                      width: 89px;
                      height: 27px;
                      line-height: 27px;
                      background: #226df0;
                      color: #fff;
                      font-size: 14px;
                      border-radius: 13px;
                      text-align: center;
                      &.ago {
                        background: #ccc;
                      }
                    }
                  }
                }
              }
              .childBorder {
                border-bottom: 1px solid #d8d8d8;
                padding-bottom: 10px;
              }
              .task_time {
                color: #999;
                font-size: 10px;
                display: flex;
                .blue {
                  color: #4c46df;
                  font-size: 10px;
                }
              }
            }
          }
        }
      }
      .kuai {
        position: absolute;
        top: 45px;
        left: 27px;
        width: 124px;
        height: 50px;
        font-size: 10px;
        overflow: hidden;
        z-index: 7;
        & > div {
          float: left;
          width: 57px;
          height: 20px;
          margin-top: 16px;
          line-height: 20px;
          text-align: center;
          background: #eee;
          color: #999;
          border-radius: 0px 10px 10px 10px;
        }
        .active {
          background: #e0e7fe;
          color: #226df0;
        }
        .juli {
          margin-left: 10px;
        }
      }
    }
  }
  .tanchuang {
    .cityIndexBar {
      width: 100%;
      background: #f9f9f9;
      padding: 5px 14px 0px 14px;
      box-sizing: border-box;
      height: 100vh;
      .city_inner {
        width: 100%;
        position: absolute !important;
        .ding_wei {
          .ding_title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #999;
            text-align: left;
          }
          .ding_content {
            width: 75px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            color: #333;
            text-align: center;
            background: #fff;
          }
        }
        .hot_city {
          width: 100%;
          overflow: hidden;
          .ding_title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #999;
            text-align: left;
          }
          .ding_content_wrap {
            width: 100%;
            .ding_content:nth-child(3n-2) {
              margin-left: 0px;
            }
            .ding_content {
              margin-left: 10px;
              margin-top: 10px;
              float: left;
              width: 75px;
              height: 30px;
              line-height: 30px;
              font-size: 13px;
              color: #333;
              text-align: center;
              background: #fff;
            }
          }
        }
        /*.hot_wrap{*/
        .hot_inner {
          .hot_list {
            width: 100%;
            .title_a {
              height: 25px;
              line-height: 25px;
              font-size: 12.5px;
              color: #999;
              text-align: left;
              background: #f9f9f9;
              /*background: #000;*/
            }
            .content_wrap {
              background: #fff;
              margin-right: 10px;
              box-sizing: border-box;
              .city_item {
                height: 45px;
                line-height: 45px;
                font-size: 16.5px;
                color: #333;
                text-align: left;
                border-bottom: 1px solid #eeeeee;
              }
            }
          }
        }
      }
    }
  }
  .right_az {
    width: 15px;
    font-size: 12px;
    color: #333;
    position: fixed;
    right: 3px;
    top: 40px;
    z-index: 19999;
    & > ul {
      & > li {
        width: 15px;
        height: 15px;
        text-align: center;
      }
    }
  }
  .task {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    &-list {
      padding: 12px 0 0;
      box-sizing: border-box;
      background: #fff;
      &-flex {
        padding: 0 70rpx;
        display: flex;
        box-sizing: border-box;
        padding-bottom: 4px;
        position: relative;
        > img {
          width: 49px;
          height: 49px;
          flex: 0 0 49px;
          border-radius: 10px;
        }
        &-r {
          margin-left: 11px;
          > h6 {
            font-size: 15px;
            color: #333;
            line-height: 1;
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-weight: 500;
            > span {
              display: inline-block;
              background: #f3f3f3;
              font-size: 10px;
              line-height: 1;
              padding: 2px 3px;
              margin-left: 5px;
              color: #666666;
              font-weight: 400;
            }
          }
          &-address {
            display: flex;
            align-items: center;
            > img {
              height: 13px;
            }
            color: #999999;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
            margin-top: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
      &-more {
        width: 100%;
        height: 30px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        > img {
          width: 23px;
          height: 12px;
        }
      }
      &-children {
        padding: 44rpx 30rpx 28rpx 30rpx;
        margin-bottom: 4px;
        position: relative;
        background: #ffffff;
        box-sizing: border-box;
        border-top: 1px #d8d8d8 solid;
        width: 89%;
        margin: auto;
        margin-top: 14px;

        > h6 {
          font-size: 15px;
          display: flex;
          justify-content: space-between;
          font-weight: 500;
          color: #333333;
          > span {
            font-weight: 400;
            font-size: 16px;
            color: #db4a37;
          }
        }
        &-l {
          width: 70%;
          > h6 {
            color: #000000;
            font-size: 15px;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          &-money {
            > img {
              width: 20px;
              height: 15px;
              margin-right: 7px;
            }
            > span {
              font-size: 14px;
            }
            font-size: 20px;
            color: #db4a37;
            font-family: Helvetica;
            line-height: 24px;
            margin-top: 6px;
          }
          &-time {
            margin-top: 10px;
            font-size: 10px;
            color: #999999;
            line-height: 1;
            > span {
              color: #226df0;
            }
          }
        }
        &-r {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 13px;
          &-come {
            width: 68px;
            height: 24px;
            background: linear-gradient(to right, #2eb3fb, #195bfc);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 30px;
          }
          &-num {
            color: #f05c48;
            text-align: center;
          }
          &-end {
            width: 68px;
            height: 24px;
            background: #ccc;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 30px;
          }
        }
      }
    }
  }
}
.nodata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.noMoreData {
  text-align: center;
  font-size: 30rpx;
  color: #999999;
  padding: 20rpx 0;
}
.shengTime {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #db4a37;
  text-align: right;
  .van-count-down {
    color: #db4a37;
  }
}
</style>
